<template>
    <div class="edu-page-warp">
         <div class="mb-8px">
            <el-button @click="returnList" size="mini" style="float:right; height:32px">返回</el-button> 
            <el-breadcrumb separator="/" style="width:80%; line-height:32px">
                <el-breadcrumb-item
                    :to="item.path"
                    v-for="item in crumbData"
                    :key="item.path"
                    ><span @click="returnList">{{ item.title }}</span>
                    </el-breadcrumb-item
                >
            </el-breadcrumb>
        </div>
        <el-card shadow="never">
            <div class="edu-page-title">学生名单列表</div>
            <br/>
            <el-row :gutter="24">
                <el-form>
                <el-col :span="8">
                    <el-form-item label="激活状态:">
                        <el-select v-model="queryForm.activaStatus" style="width:200px" @change="onSubmit">
                            <el-option
                                v-for="item in options.actConfigStatusList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                        <el-input
                            v-model="queryForm.keyWord"
                            placeholder="请输入学生学号/姓名搜索"
                            clearable
                            @keyup.enter.native="onSubmit"
                            style="width:200px"
                        >
                            <i
                                class="el-icon-search"
                                slot="suffix"
                                style="margin-top:10px;cursor:pointer"
                                @click="onSubmit"
                            ></i>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <div class="empty-box"/>
                </el-col>
                <el-col :span="12">
                    <div class="float-right">
                        <el-button type="primary" @click="exportStu">导出</el-button>
                    </div>
                </el-col>
                </el-form>
            </el-row>
            <edu-table
                :data="students"
                :selection="false"
                size="mini"
                style="width:100%"
                :order="false"
                @page-change="handleCurrentChange"
                :total="queryForm.total_"
                :pageSize="queryForm.pageSize_"
                :current-page="queryForm.pageNum_"
            >
                <el-table-column
                    prop="studentId"
                    label="学号"
                    fixed="left"
                    :show-overflow-tooltip="true"
                    width="100"
                />
                <el-table-column label="姓名" fixed="left" :show-overflow-tooltip="true" width="100">
                    <template slot-scope="scope">{{ scope.row.name }}</template>
                </el-table-column>
                <el-table-column label="当前年级">
                    <template slot-scope="scope">{{ scope.row.grade }}</template>
                </el-table-column>
                <el-table-column label="学院" :show-overflow-tooltip="true" width="150">
                    <template slot-scope="scope">{{ scope.row.facultyI18n }}</template>
                </el-table-column>
                <el-table-column label="培养专业" :show-overflow-tooltip="true" width="140">
                    <template slot-scope="scope">{{ scope.row.professionName }}</template>
                </el-table-column>
                <el-table-column
                    label="导师"
                    prop="teacherName"
                    :show-overflow-tooltip="true"
                    width="120"
                ></el-table-column>
                <el-table-column label="培养层次" :show-overflow-tooltip="true" width="120">
                    <template slot-scope="scope">{{ scope.row.trainingLevelI18n }}</template>
                </el-table-column>
                <el-table-column
                    label="培养类别"
                    prop="trainingCategoryI18n"
                    :show-overflow-tooltip="true"
                    width="120"
                ></el-table-column>
                <el-table-column label="是否国际生" width="120" prop="isOverseasCh"></el-table-column>
                <el-table-column
                    label="学习形式"
                    prop="formLearningI18n"
                    :show-overflow-tooltip="true"
                    width="120"
                ></el-table-column>
                <el-table-column label="入学季节" :show-overflow-tooltip="true" width="120" prop="enrolSeasonI18n"></el-table-column>
                <el-table-column label="激活状态" :show-overflow-tooltip="true" width="120">
                     <template slot-scope="scope">
                          <el-tag
                            type="info"
                            v-if="scope.row.activaStatus == 0"
                          >未激活</el-tag>
                          <el-tag
                            type="success"
                            v-else-if="scope.row.activaStatus == 1"
                          >已激活</el-tag>
                        </template>
                    <!-- <template slot-scope="scope">{{ scope.row.activaStatus ? "已激活" : "未激活" }}</template> -->
                </el-table-column>
                <el-table-column label="激活时间" :show-overflow-tooltip="true" width="160">
                    <template slot-scope="scope">{{ getFormatDate(scope.row.activaTime) }}</template>
                </el-table-column>
            </edu-table>
        </el-card>
    </div>
</template>
<script>
import { studentListByConfig, exportStudentListByConfig } from "common/src/api/studentinfo";
import moment from "moment";
export default {
    name: "activationStateQuery",
    props: {
        configId: {
            type: Number,
            default: null
        }
    },
    data() {
        return {
            queryForm: {
                configId: null,
                keyWord: null,
                activaStatus: null,
                pageSize_: 20,
                pageNum_: 1,
                total_: 0
            },
            students: [],
            crumbData: [
                {
                    path: "/infoActivationSetting",
                    title: "信息激活设置"
                },
                {
                    title: "学生名单列表"
                }
            ],
            options: {
                actConfigStatusList: [
                    {
                        label: "全部",
                        value: null
                    },
                    {
                        label: "已激活",
                        value: 1
                    },
                    {
                        label: "未激活",
                        value: 0
                    }
                ]
            }
        };
    },
    mounted() {
        this.init();
    },
    methods: {
        init() {
            this.onSubmit();
        },

        // 返回列表页
        returnList() {
            this.$emit('returnList')
        },
        onSubmit() {
            this.queryForm.configId = this.configId
            studentListByConfig(this.queryForm).then(res => {
                if (res.code == 200) {
                    this.students = res.data.list;
                    this.queryForm.total_ = res.data.total_;
                }
            });
        },
         
        handleCurrentChange(val) {
            this.queryForm.pageSize_ = val.pageSize;
            this.queryForm.pageNum_ = val.pageNum;
            this.onSubmit();
        },
        exportStu() {
            window.open(exportStudentListByConfig(this.queryForm));
        },
        getFormatDate(val) {
            return val ? moment(val).format("YYYY-MM-DD HH:mm:ss") : null;
        }
    }
};
</script>
